<style>
.pure_form_extra { background: #fff; padding: 10px; border: 1px solid #aaa; border-radius: 8px; box-shadow: 0 0 5px rgba(0, 0, 0, .3); padding: 10px 20px; }
.pure_form_extra textarea { width: 350px; height: 300px; }
.pure_form_extra .mandatory { color: #ff0000; padding-left: 5px; }
.pure_form_extra * { font-size: 12px !important; font-family: Trebuchet MS !important; }
table.lo { width: 100%; }
table.lo td { vertical-align: top; text-align: left; }
table.lo td.left { width: 550px; }
table.lo td.right { width: 330px; padding-left: 5px; }
#map_canvas { width: 100%; height: 200px; }
</style>

<table class="lo" cellPadding="0" cellSpacing="0">
  <tr>
    <td class="left">
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>联系我们</legend>
      
        <div class="pure-control-group">
          <label>名字<span class="mandatory">*</span></label>
          <input id="name" type="text" class="pure-input-1-2" placeholder="{Name}" />
        </div>
        
        <div class="pure-control-group">
          <label>邮件<span class="mandatory">*</span></label>
          <input id="email" type="text" class="pure-input-1-2" placeholder="{Email}" />
        </div>
        
        <div class="pure-control-group">
          <label>电话</label>
          <input id="phone" type="text" class="pure-input-1-2" placeholder="{Phone}" />
        </div>
        
        <div class="pure-control-group">
          <label>留言<span class="mandatory">*</span></label>
          <label><textarea id="message" style="resize: none;"></textarea></label>
        </div>
        
        <div class="pure-control-group">
          <label>&nbsp;</label>
          <button class="pure-button pure-input-1-2 pure-button-primary" onclick="submit_obj();">发送</button>
        </div>
      </div>
    </td>
    <td class="right">
      <div class="pure-form pure-form-aligned pure_form_extra">
        <div id="map_canvas"></div>
        <div>&nbsp;</div>
        <?php echo (isset($_SESSION['profile'])) ? $_SESSION['profile']->contact : ''; ?>
      </div>
    </td>
  </tr>
</table>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>

<script type="text/javascript">
  /*<![CDATA[*/
  var __profile = JSON.parse('<?php echo (isset($_SESSION['profile'])) ? addslashes(json_encode($_SESSION['profile'])) : '[]'; ?>');
  var __requrl = '<?php echo Utils::get_requrl($app_data); ?>';
  var __id = '<?php echo $app_data->param_id; ?>';
  var __sys = '<?php echo addslashes($app_data->sys->php_name); ?>';
  var __dir = '<?php echo PLGN_DIR . basename(dirname(__FILE__)); ?>';
  var __redmd = '<?php echo addslashes($app_data->sys->redmd); ?>';
  
  var geocoder;
  var map;
  
  $(function(){
    if (__profile.gmap && __profile.gmap != '') {
      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      geocoder.geocode( { 'address': __profile.gmap}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map, 
              position: results[0].geometry.location
          });
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
    render();
  });

  function render() {
    $('#name').val('');
    $('#email').val('');
    $('#phone').val('');
    $('#message').val('');
  };
  
  function submit_obj() {
    var req = {
      name: $('#name').val(),
      email: $('#email').val(),
      phone: $('#phone').val(),
      message: $('#message').val()
    };
    Ajax.request(
      __requrl + 'submit_obj',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        render();
      },
      null
    );
  };
  /*]]>*/
</script>